<template>
  <drawer-panel v-model="dialogVisible" title="编辑基本信息">
    <form-panel :ok-click="submitForm">
      <el-form ref="elForm" :model="queryObj" :rules="rules" label-width="125px" label-suffix="：" size="medium">
        <el-form-item label="项目名称" prop="projectName">
          <el-input v-model="queryObj.projectName" placeholder="请输入项目名称" clearable :style="{ width: '100%' }">
          </el-input>
        </el-form-item>
        <el-form-item label="项目编号" prop="projectNum">
          <el-input v-model="queryObj.projectNum" placeholder="请输入项目编号" clearable :style="{ width: '100%' }">
          </el-input>
        </el-form-item>
        <el-form-item label="备注" prop="mark">
          <el-input
            v-model="queryObj.mark"
            type="textarea"
            placeholder="请输入备注"
            :autosize="{ minRows: 4, maxRows: 4 }"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="上传报告" prop="attacheList">
          <el-upload
            name="file"
            :data="uploadData"
            ref="attacheList"
            :file-list="attacheListfileList"
            :action="attacheListAction"
            :on-success="onSuccess"
            :on-remove="onRemove"
            :on-preview="onPreview"
          >
            <!--<div tabindex="0" class="el-upload el-upload&#45;&#45;picture-card">
              <i data-v-5589edda="" class="el-icon-plus"></i>
            </div>-->
            <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传不超过 2MB 的文件</div>
          </el-upload>
        </el-form-item>
      </el-form>
    </form-panel>
  </drawer-panel>
</template>

<script>
import { speechFindDetail, speechSaveOrUpdate } from '@/api/airApi'
import { fileDelAttacheId } from '@/api/commonApi'

export default {
  name: 'EditInput',
  props: {
    monitorType: {
      type: String,
      default: 'airtype'
    },
    success: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisible: false,
      uploadData: {
        module: this.monitorType,
        businessId: ''
      },
      queryObj: {
        id: '',
        attacheId: '',
        projectName: undefined,
        projectNum: undefined,
        mark: undefined,
        attacheList: null
      },
      rules: {
        projectName: [
          {
            required: true,
            message: '请输入项目名称',
            trigger: 'blur'
          }
        ],
        projectNum: [
          {
            required: true,
            message: '请输入项目编号',
            trigger: 'blur'
          }
        ],
        mark: [
          {
            required: true,
            message: '请输入备注',
            trigger: 'blur'
          }
        ]
      },
      attacheListAction: `${window.__CTC_ENV__.VUE_APP_UPLOAD}/file/uploadFile`,
      attacheListfileList: [],
      attacheIds: []
    }
  },
  methods: {
    open(record) {
      this.dialogVisible = true
      this.attacheListfileList = []
      this.attacheIds = []
      if (record) {
        this.getDetail(record)
      } else {
        Object.assign(this.queryObj, {
          id: '',
          projectName: undefined,
          projectNum: undefined,
          mark: undefined
        })
      }
    },
    close() {
      this.dialogVisible = false
    },
    submitForm() {
      this.$refs.elForm.validate(valid => {
        if (!valid) return
        // TODO 提交表单
        const { monitorType } = this
        const attacheId = this.attacheIds.join(',')
        Object.assign(this.queryObj, { monitorType, attacheId })
        const airPoint = this.queryObj
        speechSaveOrUpdate(airPoint).then(res => {
          this.$message({
            message: `操作成功`,
            type: 'success'
          })
          this.success()
          this.close()
        })
      })
    },
    resetForm() {
      this.$refs.elForm.resetFields()
    },
    // 文件上传成功
    onSuccess(response, file, fileList) {
      const attacheId = response.data.id
      this.attacheIds.push(attacheId)
      file.id = attacheId
      console.log(response)
    },
    // 删除文件
    onRemove(file, fileList) {
      const attacheId = file.id
      const index = this.attacheIds.indexOf(attacheId)
      if (index != -1) {
        this.attacheIds.splice(index, 1)
      }
      fileDelAttacheId(attacheId).then(res => {})
    },
    onPreview(file) {
      // debugger
      // window.open(file.url, '_blank')
      const attacheId = file.id
      window.open(`${window.__CTC_ENV__.VUE_APP_UPLOAD}/file/downLoad/${attacheId}`, '_blank')
    },
    // 获取详细信息
    getDetail(row) {
      speechFindDetail({
        id: row.id,
        monitorType: this.monitorType
      }).then(res => {
        const data2 = { ...res }
        delete data2.attacheList
        delete data2.createTime
        delete data2.updateTime
        delete data2.deleteFlag
        Object.assign(this.queryObj, data2)
        const attacheList = res.attacheList
        if (attacheList) {
          this.attacheListfileList = attacheList.map(item => {
            return {
              id: item.id,
              name: item.fileName,
              url: item.downLoadUrl
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped></style>
